<template>
<view class="start-up">
	
	<view class="center-box">
			
		<image class="su-img" src="/static/img/start_up.png" mode="widthFix"></image>
		
		<image class="su-text" src="/static/img/start_text.png" mode="widthFix"></image>
		
		<button class="su-btn cu-btn lines-cyan round lg" @click="jumpLogin">好的</button>
	</view>
	
</view>
</template>

<script>
import { mapState } from "vuex";
import modalImg from '@/components/basics/modal-img.vue';
let timer;
export default {
	
	components: {
		modalImg
	},
	onShow() {
		if(timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(() => {
			if(this.hasLogin) {
				this.$jumpPages('index')
			}
		}, 200)
	},
	computed: {
		...mapState({
			"hasLogin": state => !!state.token.username
		}),
	},
	watch:{
		hasLogin(val) {
			if(val) {
				this.$mTool.showLoading()
				this.$jumpPages('index')
			}
		}
	},
	methods: {
		jumpLogin(){
			this.$jumpPages('login')
		}
	}

}
</script>

<style lang="scss" scoped>
	.start-up{
		height: 100vh;
		background: #FFFFFF;
		align-items:center;
		justify-content:center; 
		display: flex;
		.center-box{
			text-align: center;
			align-items: center;
			display: flex;
			flex-direction: column;
		}
		.su-img{
			width: 350rpx;
			margin-bottom: 150rpx;
		}
		.su-text{
			width: 350rpx;
			margin-bottom: 90rpx;
		}
		.su-btn{
			width: 300rpx;
			color: #0C7E8C;
			background-color: #FFFFFF;
		}
	}
</style>